import React from 'react'
import { Icon, Card, Spin } from 'antd'
import { IUdModalContentProps } from '@/lib'
import './index.scss'


interface IProps extends IUdModalContentProps {
  value?: string
}

interface Istate {
  fillTypes: string[]
  outlineTypes: string[]
  selectedType: string
  loding: boolean
}


/**
 *  该组件作用是展示及选择antd的icont 
 *  用请求json的方式拿到antd的icon的type类型，该json文件在此项目的pulic里面 文件名：iconTypes.json 
 *  该json文件内容是从在node_modules\@ant-design\icons\lib\manifest.js 中获取
 * 
 */
class IconList extends React.Component<IProps, Istate> {
  constructor(props) {
    super(props);
    this.state = {
      selectedType: props.value || 'account-book',
      fillTypes: [],
      outlineTypes: [],
      loding: false
    }
    this.props.getHandler && this.props.getHandler(this.getIconType)
  }

  componentWillMount() {
    this.setState({
      loding: true
    })
    let self = this;
    var xhr = new XMLHttpRequest()
    xhr.open('GET', './iconTypes.json', true);
    xhr.send(null);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200 || xhr.status == 0) {
          let obj = JSON.parse(xhr.responseText) || {}
          self.setState({
            fillTypes: obj.fill || [],
            outlineTypes: obj.outline || [],
            loding: false
          })
        }
      }
    }
  }

  protected handleIcon = (type) => {
    this.setState({
      selectedType: type
    })
  }

  protected getIconType = () => {
    return this.state.selectedType
  }

  render() {
    const { outlineTypes, selectedType } = this.state;
    return <div className='icon-list'>
      <Spin spinning={this.state.loding}>
        {/* <div>
        <h3>实底风格图标</h3>
        <ul className='list-ul'>
          {fillTypes.map(type => {
            return <li key={type} onClick={()=>this.handleIcon(type)} className={type==selectedType? 'list-li actived' : 'list-li'}><Icon className='list-icon' theme="filled" type={type} /></li>
          })}
        </ul>
      </div> */}
        <div>
          {/* <h3>边框风格图标</h3> */}
          <ul className='list-ul'>
            {outlineTypes.map(type => {
              return <li key={type} onClick={() => this.handleIcon(type)} className={type == selectedType ? 'list-li actived' : 'list-li'}><Icon className='list-icon' type={type} /></li>
            })}
          </ul>
        </div>
      </Spin>
    </div>
  }
}

export default IconList
